<template>
    <div class="newsBox">
        <div class="newsBoxTitle">
            <el-tag :color="currentTag?.color" type="primary" effect="dark" style="color:#fff;">
                {{ currentTag?.label }}
            </el-tag>
            <span class="newsActive">{{ data.newsTitle }}</span>
        </div>
        <div class="mt-[5px] mb-[5px] text-slate-500">{{ data.abstractReal }}</div>
        <div class="flex justify-between">
            <div class="flex mr-[2px] items-center">
                <span>{{ (data.opPerson ? '.由'+ data.opPerson + '添加' : '') }}</span>
            </div>

            <div @click="(e) => e.stopPropagation()">
                <el-button v-if="data.isSelect === 1" link :icon="Minus" @click="emits('removeData', data.id)" class="but">移除</el-button>
                <el-button link :icon="EditPen" @click="emits('editData', data.id)" class="but" >编辑</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Minus, EditPen } from '@element-plus/icons-vue'
import { defineProps, defineEmits, computed } from 'vue'
import { newsTypes } from '@/components/newsTypes'
const { data ={}} = defineProps(['data'])
const emits = defineEmits(['removeData','editData'])
const currentTag = computed(() => {
    return newsTypes.find(item => item.value == data.classReal)
})
</script>

<style scoped>
.newsBox {
    width: 100%;
    height: 130px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.newsBoxTitle {
    display: flex;
    color:#000;
}

.newsBoxTitle span {
    color: #ccc;
}
.but{
    border:0!important;
    padding: 0!important;
}
.newsActive{
    color:#000!important;
    margin-left:10px;
    font-size: 16px;
}
.newsActive:hover {
    color: var(--el-color-primary)!important;
}
</style>
